window.addEventListener('load',function(){
var focus=document.querySelector(".focus");
var ul=focus.querySelector("ul");
var ol=focus.querySelector(".q");
var focusWidth=focus.offsetWidth;
var arrow_r=document.querySelector(".arrow-r");
var arrow_l=document.querySelector(".arrow-l");

//动态创建下方的按钮，根据图片的个数来决定其个数
for(var i=0;i<ul.children.length;i++)
{
var li=document.createElement('li');//创建ol的li
//记录当前点击方块的索引号，用自定义属性
li.setAttribute('index',i);
ol.appendChild(li);//把li添加到ol中
//绑定点击事件
li.addEventListener('click',function()
{
    //排他思想
  for(var i=0;i<ol.children.length;i++)
{
   ol.children[i].className='';//清楚所有li的类名
 ol.children[i].style.backgroundColor="";//清楚所有li的背景颜色
}
//this.className='current'; 
//设置current类名
this.style.backgroundColor="#86B12F";
//我们点击那个图片就把索引号赋给num
//点击方块有对应的索引号,每一个li就对应一个ul中的Li有相同的索引号
var index=this.getAttribute('index');
//把索引号赋值给num，让点击的索引号与右括号的点击序号连接
num=index;
circle=index;
//点击是ul移动，移动距离是方块的索引号*图片宽度，负值
    console.log(focusWidth);
animate(ul,-index*focusWidth);
})

} 
     //ol.children[0].className='current';
     ol.children[0].style.backgroundColor='#86B12F';
     //克隆第一张图片实现左右切换无缝连接
var first=ul.children[0].cloneNode(true);
console.log(first);
//给ul添加克隆的图片
ul.appendChild(first);
     //点击右侧按钮图片跳转
     var num=0;
     //控制方框的播放
     var circle=0;
     //右边图标点击功能
     arrow_r.addEventListener('click',function()
     {
         //当num增加到克隆的那张图片就把位置返回到第一张的位置无缝轮播
         if(num==ul.children.length-1)
         {
             ul.style.left=0;
             num=0;
         }
         num++;
         //移动的距离num*focusWidth
         animate(ul,-num*focusWidth);
         //将方框与左右括号连接
         circle++;
         //dang点击到克隆图就把下方点击的索 引号归为0
         if(circle==ol.children.length)
         {
             circle=0;
         }
         for(var i=0;i< ol.children.length;i++)
         {
           // ol.children[i].className='';//将所有的小方框的类名清除
             ol.children[i].style.backgroundColor="";//将所有的小方框的颜色清除
         }
         //ol.children[circle].className='current';
         ol.children[circle].style.backgroundColor="#86B12F";//留下当前li的背景颜色
 
     });
     //左边图标的功能
     arrow_l.addEventListener('click',function()
     {
         if(num==0)
         {
             ul.style.left=-(ul.children.length-1)*focusWidth+'px';
             num=ul.children.length-1;
         }
         num--;
         //移动的距离num*focusWidth
         animate(ul,-num*focusWidth);
         //将方框与左右括号连接
         circle--;
         if(circle<0)
         {
             circle=ol.children.length-1;
         }
         for(var i=0;i< ol.children.length;i++)
         {
             ol.children[i].className='';//将所有的小方框的类名清除
             ol.children[i].style.backgroundColor="";
 
         }
        
         ol.children[circle].style.backgroundColor="#86B12F";
     });
 //开启轮播的定时器
     var timer=this.setInterval(function()
 {
     //手动调用点击事件
     arrow_r.click();
 },2000);
 
    //鼠标移入时清除定时器
 focus.addEventListener('mouseenter',function()
 {
     clearInterval(timer);//清除定时器
 timer=null;//清除定时器变量
 });
  //鼠标移出时开启定时器
 focus.addEventListener('mouseleave',function()
 {
     timer=setInterval(function()
     {
         //手动调用点击事件
         arrow_r.click();
     },2000);
 });
})